<template>
  <div class="playlists-container">
    <!-- 同步 -->
    <div class="top-card">
      <div class="icon-wrap">
        <img :src="topList.coverImgUrl" alt="" />
      </div>
      <div class="content-wrap" @click="toplaylist(topList.id)">
        <div class="tag">精品歌单</div>
        <div class="title">
          {{topList.name}}
        </div>
        <div class="info">
          {{topList.description}}
        </div>
      </div>
      <img src="../assets/listCover.jpg" alt="" class="bg" />
      <div class="bg-mask"></div>
    </div>
    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span class="item" :class="{active:tag=='全部'}" @click="tag='全部'">全部</span>
        <span class="item" 
          :class="{active:tag==item.name}" 
          v-for="(item,index) in navList"
          :key="index"
          @click="checked(item)"
          >{{item.name}}</span>
      </div>
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div 
           @click="toplaylist(item.id)"
           class="item"  
           v-for="(item,index) in list"  
           :key="index"
           >
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount}}</span>
              </div>
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="12"
    >
    </el-pagination>
  </div>
</template>

<script>
import getPlayList from '../utils/playlists'
export default {
  name: 'recommend',
  data() {
    return {
      total:0,
      topList: {},
      navList:[],
      list:[],
      tag:'全部',
      page:1,
      limit:12,
    };
  },
  created() {
    this.navData();
    this.topData();
    this.listData();
  }, 
  watch: {
    tag() {
      this.topData();
      this.listData();
      this.page = 1;
    }
  },
  methods: {
    toplaylist(id) {
      this.$router.push(`/playlist?q=${id}`);
    },
    topData() {
      getPlayList.getTopData().then(res => {
        if(res.data.playlists[0]){
          this.topList = res.data.playlists[0];
        }
    })
    },
    navData(){
      getPlayList.getNavData().then(res => {
        res.data.tags.forEach(x => {
          if(x.type === 0){
            this.navList.push(x);
          }
        })
      })
    },
    listData() {
      getPlayList.getLists(this.tag,this.limit,(this.page-1)*this.limit).then(res => {
        this.list = res.data.playlists;
        this.total = res.data.total;
        this.list.forEach(x => {
          if(x.playCount > 100000){
            x.playCount = parseInt(x.playCount/10000) + '万';
          }
        })
       })
    },
    checked(item){
      this.tag = item.name;
    },
    handleCurrentChange(val){
      this.page = val;
      this.listData();
    }
  }
};
</script>

<style >

</style>
